<template>
	<view class="order">
		<view class="title">全部库存展示</view>
		<view class="con_box">
			<view class="con_box_top">
				<view class="con_box_top_left">
					<view class="nick_name">欢迎你，{{info.shopCode}}</view>
					<view class="updata">每天更新</view>
				</view>
				<view class="all">总库存统计：<text class="num">{{info.tongNum+info.beiNum+info.xiangNum+info.xtongNum+info.mbaoNum+info.ltongNum+info.ylguanNum}}</text></view>
			</view>
			<view class="type">产品库存管理</view>
			<view class="list_box">
				<view class="list" v-for="(item,index) in 7" :key="index">
					<view class="list_top_left" style="border-bottom: 1px solid #e5e5e5;">
						<view class="num" v-if="index == 0">{{info.tongNum}}</view>
						<view class="num" v-if="index == 1">{{info.beiNum}}</view>
						<view class="num" v-if="index == 2">{{info.xiangNum}}</view>
						<view class="num" v-if="index == 3">{{info.xtongNum}}</view>
						<view class="num" v-if="index == 4">{{info.mbaoNum}}</view>
						<view class="num" v-if="index == 5">{{info.ltongNum}}</view>
						<view class="num" v-if="index == 6">{{info.ylguanNum}}</view>
						<view class="name" v-if="index == 0">桶装水数量</view>
						<view class="name" v-if="index == 1">水杯数量</view>
						<view class="name" v-if="index == 2">箱装水数量</view>
						<view class="name" v-if="index == 3">循环桶数量</view>
						<view class="name" v-if="index == 4">膜包水数量</view>
						<view class="name" v-if="index == 5">5L桶数量</view>
						<view class="name" v-if="index == 6">易拉罐数量</view>
					</view>
					<view class="type_list" @click="toNum(index,1)" style="border-bottom: 1px solid #e5e5e5;">
						
						<view class="btn">流水</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:[],
				id:0,
				userinfo:[]
			}
		},
		onLoad(options) {
			this.id=options.id;
			this.userinfo=uni.getStorageSync('user');
			this.getinfo();
		},
		methods: {
			getinfo(){
				var that=this;
				this.$http.get('shop/getMyshop',{}).then(function (response) {
					that.info=response.data.data;
				}).catch(function (error) {
					console.log(error);
				});
			},
			// 订单列表index == 0桶装水数量 1水杯数量 2箱装水数量  type == 1支出数量
			toNum:function(index,type){
				uni.navigateTo({
					url:'/pages/caiGouNum/caiGouNum?navType=' + index + '&type=' + type + '&id=' + this.id
				})
			},
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.order{
		.con_box{
			padding: 40rpx 30rpx;
			background: linear-gradient(180deg, #d9e5ff 0%, #f6f6f6 100%);
			.list_box{
				.list{
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.type_list{
						padding: 40rpx 0;
						border-radius:  0 20rpx 0 0;
						width: 50%;
						background: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						border-left: 1px solid #e5e5e5;
						.btn{
							width: 130rpx;
							height: 62rpx;
							background: #6686f5;
							box-shadow: 0 3rpx 20rpx #6686f5;
							border-radius: 31rpx;
							color: #fff;
							font-size: 26rpx;
							text-align: center;
							line-height: 62rpx;
						}
						.type_list_left{
							width: 50%;
							text-align: center;
							font-size: 26rpx;
							.num{
								padding-bottom: 12rpx;
								font-size: 38rpx;
								color: #333;
							}
						}
					}
					.list_top_left{
						padding: 40rpx 0;
						width: 49.5%;
						text-align: center;
						.num{
							color: #333;
							font-size: 38rpx;
						}
						.name{
							padding-top: 12rpx;
							color: #6686f5;
							font-size: 28rpx;
						}
					}
				}
			}
			.type{
				padding: 0 0 20rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			.con_box_top{
				padding-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.con_box_top_left{
					color: #333;
					.nick_name{
						font-size: 32rpx;
					}
					.updata{
						font-size: 24rpx;
					}
				}
				.all{
					color: #333;
					font-size: 32rpx;
					.num{
						font-size: 40rpx;
						font-weight: bold;
					}
				};
			}
		}
		.title{
			padding: 30rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%);
		}
	}
</style>
